<template>
  <div v-show="showPickList" class="my-modal-page c-pt52">
    <div class="c-fs28 c-fc-xblack c-textAlign-c c-mb22">选择群成员</div>
    <new-search-bar :placeholder="placeholdText" @search='startSearch' @cancel='searchCancel' class="c-mb16" :searchText='nickname'></new-search-bar>
    <div class="c-maxh360 c-content-scroll" id="scrollMemberList" @scroll="onMemberScroll">
      <div class="c-pb20 c-flex-row c-ph24 c-aligni-center c-justify-sb" v-for="(item,index) in memberList" :key="index">
        <pick-item :items='item'></pick-item>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="没有成员" :height60='true'></loading-status-tem>
    </div>
    <footer class="c-fs20 c-flex-row c-fs28 c-bd-t1">
      <div @click="showPickListNone" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-gray c-bd-r1">取消</div>
      <div @click="onConfirmUpdate" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-green">确定</div>
    </footer>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import pickItem from "@/components/templates/social/pickItem.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
export default {
  components: {
    newSearchBar,
    loadingStatusTem,
    pickItem
  },
  inject:['provideGetDynamicName'],
  props: {
    socialRoomId: {
      type: String,
      default: '',
    },
    showPickList: {
      type: Boolean,
      default: false
    },
    userRole: {
      type: Number,
      default: 1
    },
  },
  watch: {
    showPickList(val) {
      if (val) {
        pageIndex = 1;
        this.dataStatus = 'HAS_MORE_DATA';
        this.memberList = [];
        this.getMemberList();
      } else {
        this.searchCancel()
      }
    },
  },
  data() {
    return {
      placeholdText: '搜索成员',
      theme: localStorage.getItem("colorName") || 'mb5_default',
      dataStatus: 'HAS_MORE_DATA',
      totalMemberNum: 0,
      memberList: [],
      nickname: '',
      tabList: [],
      fontSet: {
        defaultColor: 'c-fc-sblack',
      },
      fontSize: 'c-fs22',
      operaFlag: false,
      isCheckQa: false,
      userId: ''
    };
  },
  methods: {
    checklist() {
      this.memberList = this.checklist
    },
    operaFlagChange() {
      this.operaFlag = !this.operaFlag
    },
    onMemberScroll() {
      let domScroll = document.getElementById('scrollMemberList');
      if (this.checkScrollBottom(domScroll) && this.dataStatus == 'HAS_MORE_DATA') {
        this.getMemberList();
      }
    },
    //是否滚到底部
    checkScrollBottom(curDom) {
      if (curDom.scrollTop + curDom.clientHeight >= curDom.scrollHeight - 5) {
        return true;
      } else {
        return false;
      }
    },
    //获取群成员列表
    getMemberList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}social/getSocialMember/${this.socialRoomId}?page=${pageIndex}&limit=20&nickname=${this.nickname}`, res => {
        if (pageIndex == 1) {
          this.memberList = res.data.data;
        } else {
          this.memberList = [...this.memberList, ...res.data.data];
        }
         if (this.provideGetDynamicName) {
          this.memberList.forEach(item => {
            item = this.provideGetDynamicName(item);
          })
        }
        // this.totalMemberNum = res.data.total * 1;
        console.log(this.memberList)
        if (!res.data.next_page_url) {
          this.dataStatus = this.memberList.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    //开始搜索
    startSearch(searchText) {
      this.nickname = searchText.searchValue;
      pageIndex = 1;
      console.log(this.nickname)
      this.memberList = []
      this.getMemberList();
    },
    searchCancel() {
      this.nickname = ''
      pageIndex = 1;
      this.memberList = []
      console.log(this.nickname)
      this.getMemberList();
    },
    showPickListNone() {
      this.$emit('showPickListNone')
    },
    onConfirmUpdate() {
      let arr = this.memberList.filter(item => {
        return item.isChecked == 1
      })
      this.pickList = arr;
      this.$emit('surePickList', this.pickList)
      console.log(this.pickList)
    }
  },
  deactivated() {
    console.log('成员关闭')
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
